<template>
    <div class="groupChat">
        <!-- 左边头像插槽 -->
        <slot name="image" />
        <input type="text" placeholder="请输入搜索关键词"
            v-model="modelValue"
        />
        <van-button size="small" type="primary"
            @click="onClickBtn"
        >搜索</van-button>
    </div>
</template>

<script>
    import { eventBus, eventTypes } from "@/utils/event-bus";
    import { mapState } from "vuex";

    export default {
        data() {
            return {
                modelValue: null,
            }
        },
        computed: {
            ...mapState(['friendList']),
        },
        methods: {
            onClickBtn() {
                let tmp = this.friendList.find(item => item.friendId.nickname == this.modelValue).friendId;
                eventBus.emit(eventTypes.SEARCH, tmp);
            },
        },
    };
</script>

<style lang="less" scoped>
    .groupChat {
        height: 2.875rem;
        width: 100%;
        display: flex;
        align-items: center;
        padding-top: 0.3125rem;
        padding-bottom: 0.3125rem;
        input {
            flex: 1;
            background: #fff;
            height: 2.5rem;
            border: none;
            border-radius: 5px;
            padding-left: 0.3125rem;
        }
    }
</style>
